$(function () {
  var index = 0;
  var timer = null;
  var length = $(".img-list > li").length - 1;
  console.log(length);
  play(index, timer);
  isMouseMove(timer);
  isMouseOut(index, timer);
  

  //设置点击事件
  $(".btn-left").click(function () {
    index++;
    if (index > length) {
      index = 0;
    }
    next(index);//下一张图片
  })
  $(".btn-right").click(function () {
    index--;
    if (index < 0) {
      index = length;
    }
    prev(index);//上一张图片;
  })


  //动态的添加图片
  $(".warp .img-list").css({
    "width": 500*(length+1)
  })
  //动态的添加小圆点
  $(".img-flag").css({
    "width": 20 + length * 45
  });
  for (let i = 0; i <= length-1; i++) { 
    $(".img-flag").append("<li></li>");
  }



  //设置自动播放的定时器
  function play() {
    if (timer == null) {
      timer = setInterval(function () {
        index++;
        if (index > length) {
          index = 0;
        }
        iconChange(index);
        next(index);
      }, 2000)
    }
  }
  // 切换下一张的动画
  function next(index) {
    console.log(index);
    if (index <= length) {
      $(".img-list").animate({ left: -(index) * 500 }, 500);
    }
  }
  // 切换上一张的动画
  function prev(index) {
    console.log(index);
    if (index >= 0) {
      $(".img-list").animate({ left: -(index) * 500 }, 500);
    }
  }
  //判断鼠标滑出
  function isMouseOut() {
    $(".warp").mouseout(function () {
      play(index, timer)
    });
  }
  //判断鼠标滑入
  function isMouseMove() {
    $(".warp").mousemove(function () {
      clearInterval(timer);
      timer = null;
    })
  }
  //小圆点同步变化的函数
  function iconChange(index) { 
    for (let index = 0; index <= length; index++) {
      $(".img-flag  li").eq(index).css({
        "background-color": "#C4C4C4"
      });
    }
    $(".img-flag  li").eq(index).css({
      "background-color":"#F819F8"
    })
  }
  setTimeout(function () {
    $(".text").fadeIn(2000);
  }, 150000);
})
